<template>
  <div>
    <el-container>
      <!-- width的宽度跟collapse一样动态控制 -->
      <el-aside width="collapse">
        <el-menu :collapse="isCollapse" active-text-color="rgb(64, 158, 255)" background-color="#393e42"
                 class="el-menu-vertical" text-color="#fff">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Tools/>
              </el-icon>
              <span>工厂设置</span>
            </template>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div :title="isCollapse ? '点击展开' : '点击收起'" class="box_bgd" @click="isC">
            <!-- 点击展开收起导航和切换对应图标 -->
            <el-icon :size="20">
              <Expand v-if="isCollapse"/>
              <Fold v-else/>
            </el-icon>
          </div>
          <div class="box_bgd">right</div>
        </el-header>
        <el-main>
          main
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {Expand, Tools, Fold} from '@element-plus/icons-vue'
import {ref} from 'vue'

//默认为展开
const isCollapse = ref(false)

// 动态控制展开与收起和切换对应图标
function isC() {
  isCollapse.value = !isCollapse.value
}
</script>

<style scoped>
.el-header {
  background: #b3c0d1;
  color: #333;
  padding: 0 !important;
  display: flex;
}

.el-aside {
  background: #393e42;
  color: #333;
  height: 100vh;
}

.el-menu {
  border-right-width: 0;
}

.el-main {
  color: #333;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}

.box_bgd {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.box_bgd i {
  font-size: 20px;
}

.box_bgd:hover {
  background: rgb(203, 215, 230);
}
</style>
